import { Component } from 'react';
import Link from 'next/link';
import { Layout, Menu, Icon } from 'antd';
import { logout, logStatusCheck } from '../../static/js/lib';
import { getTargetUrl } from '../../static/js/utils';
import Head from './head';
import PageHeader from './page_header';
import '../../static/css/admin/layout.styl';

const { Content, Footer, Sider } = Layout;

export default class CommonLayout extends Component {
  componentDidMount() {
    logStatusCheck(getTargetUrl());
  }

  render() {
    return (
      <Layout hasSider>
        <Head pageTitle={this.props.pageTitle} pageLinkSrc={this.props.pageLinkSrc} />
        <Sider
          className="layout-sider"
          breakpoint="lg"
          collapsedWidth="0"
          collapsible
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={[this.props.pageKey]}>
            <Menu.Item key="setting">
              <Link href="/Admin/Setting/index">
                <span>
                  <Icon type="setting" />
                  网站设置
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="nav">
              <Link href="/Admin/Nav/index">
                <span>
                  <Icon type="compass" />
                  导航设置
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="index">
              <Link href="/Admin/Home/index">
                <span>
                  <Icon type="home" />
                  首页内容
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="news">
              <Link href="/Admin/News/index">
                <span>
                  <Icon type="fire" />
                  最新资讯
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="bussiness">
              <Link href="/Admin/Bussiness/index">
                <span>
                  <Icon type="star" />
                  业务介绍
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="case">
              <Link href="/Admin/Case/index">
                <span>
                  <Icon type="trophy" />
                  成功案例
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="info">
              <Link href="/Admin/Info/index">
                <span>
                  <Icon type="profile" />
                  关于我们
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="contact">
              <Link href="/Admin/contact/index">
                <span>
                  <Icon type="contacts" />
                  联系我们
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="user">
              <Link href="/Admin/User/index">
                <span>
                  <Icon type="user" />
                  管理员设置
                </span>
              </Link>
            </Menu.Item>
            <Menu.Item key="logout">
              <Icon type="close-circle" />
              <span onClick={logout}>登出</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Content className="layout-content-wrap">
            <PageHeader extraBtns={this.props.extraBtns} pageContent={this.props.pageContent} />
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            copyright 2018 ©
            {this.props.pageOwner}
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
